<template>
	<div class="home">
		<el-dialog v-model="showView" width="400px" :title="islog?'用户登录':'新用户注册'">
			<el-form ref="form">
				<el-input placeholder="登录账号" v-model.trim.lazy="form.uname"></el-input>
				<el-input placeholder="登录密码" v-model.trim.lazy="form.pwd" :show-password="true" style="margin: 10px 0;"></el-input>
			</el-form>
			<span class="reglink" @click="islog=!islog">{{islog?'没有账号？点我去注册':'返回登录'}}</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="showView=false">取消</el-button>
					<el-button type="primary" @click="Login()">{{islog?'登录':'提交注册'}}</el-button>
				</span>
			</template>
		</el-dialog>
		<el-container>
			<el-header>
				<el-row justify="space-between">
					<el-col :span="5">
						<h1 style="line-height: 60px;">旧华书店</h1>
					</el-col>
					<el-col :span="15">
						<el-menu background-color="none" mode="horizontal" :router="true"
						text-color="#fff" active-text-color="#005986"
						style="font-weight: bold;"
						>
							<el-menu-item index="/home">主页</el-menu-item>
							<el-menu-item index="/home/details">商品详情</el-menu-item>
							<el-menu-item index="/home/cart">购物车</el-menu-item>
							<el-menu-item index="/home/myorder">我的订单</el-menu-item>
							<el-menu-item index="/home/myset">个人信息设置</el-menu-item>
						</el-menu>
					</el-col>
					<el-col :span="3">
						<div class="userinfo">
							<template v-if="hasOnline">
								<template v-if="userInfo.img">
									<img :src="`${$ServerUrl}/api/public/showImg/${userInfo.img}`" />
								</template>
								<template v-else>
									<img src="@/assets/img/user.png"/>
								</template>
								<el-dropdown>
									<span class="el-dropdown-link">
										{{userInfo.nickname}}
									  <el-icon ><arrow-down /></el-icon>
									</span>
									<template #dropdown>
									  <el-dropdown-menu>
										<el-dropdown-item @click="$router.push({name:'myset'})">个人中心</el-dropdown-item>
										<el-dropdown-item @click="$router.push({name:'myorder'})">我的订单</el-dropdown-item>
										<el-dropdown-item @click="OutLogin()">退出登录</el-dropdown-item>
									  </el-dropdown-menu>
									</template>
								</el-dropdown>
							</template>
							<template v-else>
								<label style="cursor: pointer;" 
									@click="showView=1">登录账号
								</label>
								<el-icon @click="showView=1"><arrow-right-bold /></el-icon>
							</template>
						</div>
					</el-col>
				</el-row>
			</el-header>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</div>
</template>

<script>
import qs from 'qs';
import {ArrowDown,ArrowRightBold} from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus'
import {mapState,mapGetters,mapMutations} from 'vuex';

export default{
	name:'Home',
	components:{ArrowDown,ArrowRightBold},
	data(){
		return {
			showView:false,
			islog:true,//true:登录  false:注册
			form:{
				uname:'',
				pwd:''
			}
		}
	},
	computed:{
		...mapState(['userInfo']),
		...mapGetters(['hasOnline']),
		...mapMutations(['outlogin'])
	},
	methods:{
		Login(){
			if(this.form.uname=='' || this.form.pwd=='')return false;
			if(this.islog){
				//登录模式
				let arg = {
					username:this.form.uname,
					password:this.form.pwd,
					grant_type:'password',
					client_id:'sobook4',
					client_secret:'444444'
				}
				this.axios.post('/oauth/token',qs.stringify(arg)).then((res)=>{
					let data = res.data;
					//console.log(data);
					this.PushMsg('success','登录成功！')
					localStorage.Online = true;
					localStorage.token = data.access_token;//唯一Token
					localStorage.refresh_token = data.refresh_token;
					localStorage.token_type = data.token_type;
					this.getUser();//获取用户信息
				}).catch((err)=>{
					//console.log(err);
				})
			}else{
				//注册模式
				
				let arg = {
					id:0,
					nickname:'新注册用户',
					account :this.form.uname,
					password:this.form.pwd,
					role:String.fromCharCode(80),//前台用户
					phone:'',
					closed:0
				}
				this.axios.post('/api/public/addUser',arg)
				.then((res)=>{
					console.log(res);
					if(res.data.code==200){
						this.islog=true;
						this.PushMsg('success','注册成功，已自动切换到登录界面！')
					}else{
						this.PushMsg('error','注册失败，该用户名已被注册！')
					}
				})
				.catch((err)=>{
					//console.log("失败提示",err);
					this.PushMsg('error','注册失败!')
				})
			}
			
		},
		//获取用户信息
		getUser(){
			this.axios.get('/api/info/getUser').then((res)=>{
				//用户已登录
				// console.log(res.data);
				this.$store.commit('setUserInfo',res.data);
				localStorage.role = res.data.role;
				localStorage.account = res.data.account;
				localStorage.nickname = res.data.nickname;
				this.showView = false;
				this.$store.commit('onlogin')
				//该账号有管理员权限
				if(res.data.role=="G"){
					//跳转至后台
					this.$router.push('/admin')
				}
			}).catch((err)=>{
				this.$store.commit('outlogin');//清除用户登录痕迹
				this.PushMsg('error','获取用户信息异常,请重新登录！')
			})
		},
		//弹出消息提示
		PushMsg(type,message){
			if(type=='error'){
				ElMessage.error({
					message: message,
				})
			}else{
				ElMessage({
					message: message,
					type: type,
				})
			}
			
		},
		//退出登录
		OutLogin(){
			this.$store.commit('outlogin');
			this.$router.push({name:'main'});
			this.PushMsg('success','已退出账户！')
		}
	},
	created() {
		//用户已登录过
		if(this.hasOnline && this.setUserInfo==undefined){
			this.getUser();//获取用户信息
		}
	}
}
</script>

<style scoped>
*{padding: 0;margin: 0;list-style: none;}
.home header{
	color: white;
	height: 60px;
	background:linear-gradient(131deg,#55aef1,#4371f1);
}
.home ul li a{
	color: white;
	text-decoration: none;
}
.el-menu-item{
	text-align: center;
	height: 61px;
}
.el-dropdown-link{
	color: white;
}
.userinfo{
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	cursor: pointer;
}
.userinfo img{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-right: 10px;
}
:deep(.el-dialog__footer){
	text-align: center;
}
/* .el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: none;
} */
.reglink{
	cursor: pointer;
	font-size: 0.5rem;
}
.reglink:hover{
	text-decoration: underline;
}
</style>
